<template>
  <div id="box">
    <el-backtop></el-backtop>
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      @load="onLoad"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <van-cell v-for="(order, index) in list" class="list-item" :key="index">
          <div class="order-box">
            <div class="order-header">
              <span class="order-date">{{
                order.generateTime | formatDate()
              }}</span>
              <span class="order-id">开心影院订单号:{{ order.orderNo }}</span>
              <span class="del-order" @click="deleteOrder(order.id)"></span>
            </div>

            <div class="order-body">
              <div class="poster">
                <img :src="order.mImage" />
              </div>
              <div class="order-content">
                <div class="movie-name">《{{ order.mName }}》</div>
                <div class="cinema-name">{{ order.hName }}</div>
                <div class="hall-ticket">
                  <span v-for="seat in order.seats" :key="seat.id"
                    >{{ seat.seatRow }}排{{ seat.seatColumn }}座</span
                  >
                </div>
                <div class="show-time">
                  {{ getTime(order.startDate) }}
                  {{ order.startDate | formatTime() }}
                </div>
              </div>

              <div class="order-price">￥{{ order.amount }}</div>

              <div class="order-status">{{ getStatus(order.oStatus) }}</div>

              <div class="actions">
                <div>
                  <a :href="'/order/detail/' + order.id" class="pay-btn" v-if="order.oStatus === '0'"
                    >付款</a
                  >
                  <!-- 退款:href="'/api/order/refund/' + order.id" -->
                  <a @click="open(order.id)" class="refund-btn" v-if="isAfter(order.startDate) && (order.oStatus === '1'||order.oStatus === '2')"
                    >退款</a>
                  <a :href="'/order/detail/' + order.id" class="order-detail"
                    >查看详情</a
                  >
                </div>
              </div>
            </div>
          </div>
        </van-cell>
    </van-list>

    <p v-if="loading" style="margin-top: 10px" class="loading">
      <span></span>
    </p>
    <p v-if="noMore" style="margin-top: 10px; font-size: 13px; color: #ccc">
      没有更多了
    </p>
  </div>
</template>

<script>
import axios from 'axios'
import dayjs from 'dayjs'
import { getWeekDate } from '@/utils/index.js'
import { refund,deleteOrder } from '@/api/order'
export default {
  data () {
    return {
      count: 1, // 起始页数值为0
      loading: false,
      finished: false,
      totalPages: '', // 取后端返回内容的总页数
      list: [] // 后端返回的数组
    }
  },
  computed: {
    noMore () {
      // 当起始页数大于总页数时停止加载
      return this.count >= this.totalPages - 1
    },
    disabled () {
      // 当起始页数大于总页数时停止加载
      return this.loading || this.noMore
    }
  },
  created () {
    this.getMessage()
  },
  methods: {
    onLoad () {
      // 滑到底部时进行加载
      this.loading = true
      setTimeout(() => {
        this.count += 1 // 页数+1
        this.getMessage() // 调用接口，此时页数+1，查询下一页数据
      }, 1)
    },
    open (id) {
      this.$confirm('确认退款吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        refund(id).then((res) => {
          if (res.data === '退款成功') {
            this.$message({
              type: 'success',
              message: '退款成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: '退款失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退款'
        })
      }
      )
    },
    getMessage () {
      const params = {
        page: this.count,
        pageSize: 5 // 每页查询条数
      }
      axios({
        url: '/api/order/getOrders',
        params: params,
        method: 'post'
      })
        .then((res) => {
          console.log(res)
          if (res.data.message === '暂无更多订单') {
            this.list = [...this.list, ...res.data.data.list]
            this.finished = true
            this.loading = false
            return
          }
          this.list = [...this.list, ...res.data.data.list] // 因为每次后端返回的都是数组，所以这边把数组拼接到一起
          this.totalPages = res.data.length
          this.loading = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getTime (time) {
      const day = dayjs(dayjs(time).format('YYYY-MM-DD')).diff(
        dayjs(new Date()).format('YYYY-MM-DD'),
        'day'
      )
      if (day === 0) {
        return '今天'
      } else if (day === 1) {
        return '明天'
      } else if (day === 2) {
        return '后天'
      } else {
        return getWeekDate(day)
      }
    },
    getStatus (status) {
      // 0:"待支付"，1:"用户支付票价"，2::"售票员已代为支付票价"，3:“用户已退票“,4:"售票员已退票",-1:"已过期"
      switch (status) {
        case '0':
          return '待支付'
        case '1':
          return '购买成功'
        case '2':
          return '购买成功'
        case '3':
          return '退款成功'
        case '4':
          return '退款成功'
        case '-1':
          return '已过期'
      }
    },
    // 判断订单上映时间在当前时间之后
    isAfter (time) {
      return dayjs(time).isAfter(dayjs(new Date()))
    },
    deleteOrder(id) {
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOrder(id).then((res) => {
          if (res.data === '删除成功') {
            // 将订单id为id的数据从list中删除
            this.list = this.list.filter(item => item.id !== id)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
      )
    }
  },
  filters: {
    // 年月日的过滤器
    formatDate (value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 月日时分的过滤器
    formatTime (value) {
      return dayjs(value).format('MM月DD日 HH:mm')
    }
  }
}
</script>

<style scoped>
.goTop {

}
.order-box {
  border: 1px solid #e5e5e5;
  margin: 0 40px 30px 0;
}
.order-box .order-header {
  background-color: #f7f7f7;
  font-size: 14px;
  padding: 16px 20px;
}
.order-box .order-header .order-date {
  color: #333;
  display: inline-block;
  margin-right: 30px;
}
.order-box .order-header .order-id {
  color: #999;
}
.order-box .order-header .del-order {
  width: 15px;
  height: 16px;
  background: url()
    no-repeat;
  float: right;
}
.order-box .order-body {
  padding: 20px;
  padding-right: 0;
}
.order-box .order-body .poster {
  border: 2px solid #fff;
  -webkit-box-shadow: 0 1px 2px 0 hsl(0deg 0% 53% / 50%);
  box-shadow: 0 1px 2px 0 hsl(0deg 0% 53% / 50%);
  margin-right: 11px;
  font-size: 0;
  width: 66px;
  height: 91px;
}

.order-box .order-body > div {
  display: inline-block;
  vertical-align: top;
}
.order-box .order-body .poster img {
  width: 100%;
  height: 100%;
}
img {
  border-style: none;
}
.order-box .order-body .order-content {
  width: 49%;
}
.order-box .order-body .movie-name {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 4px 0 7px -6px;
}
.order-box .order-body .cinema-name,
.order-box .order-body .hall-ticket {
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
}
.order-box .order-body .actions .pay-btn {
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f03d37;
    color: #fff;
    -webkit-box-shadow: 0 2px 10px -2px #f03d37;
    box-shadow: 0 2px 10px -2px #f03d37;
    border-radius: 15px;
    margin-bottom: 8px;
}
.refund-btn {
    display: block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f03d37;
    color: #fff;
    -webkit-box-shadow: 0 2px 10px -2px #f03d37;
    box-shadow: 0 2px 10px -2px #f03d37;
    border-radius: 15px;
    margin-bottom: 8px;
    cursor: pointer;
}
.order-box .order-body .hall-ticket span {
  display: inline-block;
  margin-right: 5px;
}
.order-box .order-body .show-time {
  font-size: 12px;
  color: #f03d37;
}
.order-box .order-body .actions,
.order-box .order-body .order-price,
.order-box .order-body .order-status {
  font-size: 14px;
  color: #333;
  width: 12%;
  line-height: 95px;
}
.order-box .order-body .order-status {
  width: 15%;
}
.order-box .order-body .actions {
  text-align: center;
}
.order-box .order-body .actions > div {
  line-height: normal;
  display: inline-block;
  vertical-align: middle;
}
.order-box .order-body .actions .order-detail {
  color: #333;
}
a {
  text-decoration: none;
}
</style>
